<div class="demo" id="chaito">
    
    <center>

        <div id="ResultadoBuscarPaciente">
        </div>

        <form id="FormBuscarPaciente" name="FormBuscarPaciente" action="<?php echo url_for('buscarpaciente2/filtrar'); ?>" method="post">
            <table>
                <tbody>
                    <?php echo $filtro; ?>
                </tbody>
            </table>

            <div id="div_boton">
                <input type="submit" value="  BUSCAR  " id="boton_filtrar" name="boton_filtrar"/>
            </div>

            <div id="ajax_loader">
                <?php echo image_tag('/images/loader_modal.gif', array("style" => "display: none","id" =>"loader_gif2")); ?>
            </div>

        </form>

    </center>
    
</div><!-- End demo -->

<script type="text/javascript">

        // esperamos que el DOM cargue
        $(document).ready(function() {
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#FormBuscarPaciente').ajaxForm(opciones) ;



             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                          $("#boton_filtrar").hide();
                          $("#loader_gif2").show(); //muestro el loader de ajax
             };

             function mostrarRespuesta (responseText){
                          $("#loader_gif2").hide();
                          $("#boton_filtrar").show();
                          $("#ResultadoBuscarPaciente").html(responseText + "<br/>");
             };
        });

</script>



